import { useState } from 'react';
import useFriendStatus from "../useFriendStatus";
import './style.css';

export default function ChatRecipientPicker(props) {
  const [recipientID, setRecipientID] = useState(3);
  const isRecipientOnline = useFriendStatus(recipientID);
  console.log(recipientID, isRecipientOnline);
  const friendList = props.list;
  return (
    <>
      <div className={`circle ${isRecipientOnline ? 'green' : 'red'}`} />
      <select
        value={recipientID}
        onChange={e => setRecipientID(Number(e.target.value))}
      >
        {friendList.map(friend => (
          <option key={friend.id} value={friend.id}>
            {friend.name}
          </option>
        ))}
      </select>
    </>
  );
}